<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>提交订单</title>
    <link rel="stylesheet" href="mui/css/mui.css">
    <script src="mui/js/mui.js"></script>
    <script src="js/jquery-1.11.3.js"></script>
    <link rel="stylesheet" href="css/style.css?v1.1.3">
    <style>
        .pub-bg-down{background: url("./images/down1.png") no-repeat  calc(100% - 20px) center;background-size: 1.6rem;}
        .payment-th .payment-th-l {padding-left: .5rem;}
    </style>
</head>
<body>
<div class="mui-content">
    <!--<div class="mui-card">-->
        <div class="mui-row payment-th payment-padding">
            <div class="mui-col-xs-6">应缴纳月份</div>
            <div style="float: right;" class="mui-col-xs-4">应缴纳金额</div>
            <!--<div class="mui-col-xs-3">状态</div>-->
        </div>
        <div class="mui-card payment-collapse">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <a class="mui-row payment-th mui-checkbox mui-left" href="#">
                        <input style="left: 1rem;top: 15px;z-index: 999;" name="checkbox" type="checkbox">
                        <div class="pub-collapse mui-row">
                            <div class="mui-col-xs-6  payment-date"> 2018年12月</div>
                            <div style="float: right" class="mui-col-xs-4 pub-bg-down">￥888.88</div>
                        </div>

                        <!--<div class="mui-col-xs-3 red">已欠费</div>-->
                    </a>
                    <div class="mui-collapse-content pub-collapse-content" style="display: none;">
                        <div class="mui-row payment-th">
                            <div class="mui-col-xs-6 payment-text-l">停车费</div>
                            <div style="float: right" class="mui-col-xs-4 payment-th-l">￥75.00</div>
                            <!--<div class="mui-col-xs-3"></div>-->
                        </div>
                        <div class="mui-row payment-th">
                            <div class="mui-col-xs-6 payment-text-l">停车费</div>
                            <div style="float: right" class="mui-col-xs-4 payment-th-l">￥75.00</div>
                            <!--<div class="mui-col-xs-3 "></div>-->
                        </div>
                    </div>
                </li>
                <li class="mui-table-view-cell">
                    <a class="mui-row payment-th mui-checkbox mui-left" href="#">
                        <input style="left: 1rem;top: 15px;z-index: 999;" name="checkbox" type="checkbox">
                        <div class="pub-collapse mui-row">
                            <div class="mui-col-xs-6  payment-date"> 2018年12月</div>
                            <div style="float: right" class="mui-col-xs-4 pub-bg-down">￥888.88</div>
                        </div>

                        <!--<div class="mui-col-xs-3 red">已欠费</div>-->
                    </a>
                    <div class="mui-collapse-content pub-collapse-content" style="display: none;">
                        <div class="mui-row payment-th">
                            <div class="mui-col-xs-6 payment-text-l">停车费</div>
                            <div style="float: right" class="mui-col-xs-4 payment-th-l">￥75.00</div>
                            <!--<div class="mui-col-xs-3"></div>-->
                        </div>
                        <div class="mui-row payment-th">
                            <div class="mui-col-xs-6 payment-text-l">停车费</div>
                            <div style="float: right" class="mui-col-xs-4 payment-th-l">￥75.00</div>
                            <!--<div class="mui-col-xs-3 "></div>-->
                        </div>
                    </div>
                </li>
               <!-- <li class="mui-table-view-cell">
                    <a class="mui-row payment-th" href="#">
                        <div class="mui-col-xs-6 mui-checkbox mui-left payment-date"><input style="left: 1rem" name="checkbox" type="checkbox"> 2018年12月</div>
                        <div class="mui-col-xs-3 pub-bg-down pub-collapse">￥888.88</div>
                        <div class="mui-col-xs-3 blue">待预缴</div>
                    </a>
                    <div class="mui-collapse-content pub-collapse-content" style="display: none;">
                        <div class="mui-row payment-th">
                            <div class="mui-col-xs-6 payment-text-l">停车费</div>
                            <div class="mui-col-xs-3 payment-th-l">￥75.00</div>
                            <div class="mui-col-xs-3 "></div>
                        </div>
                        <div class="mui-row payment-th">
                            <div class="mui-col-xs-6 payment-text-l">停车费</div>
                            <div class="mui-col-xs-3 payment-th-l">￥75.00</div>
                            <div class="mui-col-xs-3 "></div>
                        </div>
                    </div>
                </li>-->
            </ul>
        </div>
    <!--</div>-->

    <div class="mui-card pay-index-middle pay-index-add">
        <h2 id="addPaymentItem"><span style="font-size: 2.4rem;">＋</span>添加预存款</h2>
        <div id="paymentItem">

        </div>
        <div style="font-size: 1.6rem;text-align: right;padding: 1rem .5rem;border-top: 1px solid #eee;"><a style="color: #3290FF;" href="payment_list.html">查看预存纪录</a></div>
    </div>
    <div class="mui-card payment-manager">
        <div class="mui-row">
            <div class="mui-col-xs-12" onclick="window.location.href='manager.html'">经办人：<input type="text" placeholder="请填写经办人手机号码"></div>
        </div>
        <p onclick="asd()">*经办人是协助您缴费的小区物业人员，没有可以不填</p>
    </div>
</div>
<div class="payment-footer" style="height: auto">
    <div class="mui-row payment-address" style="line-height: 2.5rem;padding: .5rem 1rem">
        <div class="mui-col-xs-12">
            缴费地址：彩生活测试网3楼888号
            缴费地址：彩生活测试网3楼888号
        </div>
    </div>
    <div class="mui-row">
        <div class="mui-col-xs-3 all-select"><div class="mui-checkbox mui-left"><input style="left: 1rem" name="checkbox" type="checkbox"> 全选</div></div>
        <div class="mui-col-xs-9">
            <div class="mui-row">
                <div class="mui-col-xs-7 payment-money">总计：<span class="red">￥222.00</span></div>
                <button onclick="submit()" type="button" class="mui-btn mui-btn-primary mui-btn-block mui-col-xs-5">提交订单</button>
            </div>
        </div>
    </div>
</div>
<div id="html" style="display: none">
    <h2 class="pop-index-title">请确认下列缴费项</h2>
    <div style="max-height: 400px;overflow: auto">
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="mui-row pop-index-list"><div class="mui-col-xs-7">2018年10月</div><div class="mui-col-xs-4">￥888.88</div></div>
        <div class="pop-index-item">
            <h2>预存款</h2>
            <div class="mui-row pop-index-list"><div class="mui-col-xs-7">物业管理费</div><div class="mui-col-xs-4">￥888.88</div></div>
            <div class="mui-row pop-index-list"><div class="mui-col-xs-7">物业管理费</div><div class="mui-col-xs-4">￥888.88</div></div>
            <div class="mui-row pop-index-list"><div class="mui-col-xs-7">物业管理费</div><div class="mui-col-xs-4">￥888.88</div></div>
            <div class="mui-row pop-index-list"><div class="mui-col-xs-7">物业管理费</div><div class="mui-col-xs-4">￥888.88</div></div>
            <div class="mui-row pop-index-list"><div class="mui-col-xs-7">物业管理费</div><div class="mui-col-xs-4">￥888.88</div></div>
            <div class="mui-row pop-index-list"><div class="mui-col-xs-7">物业管理费</div><div class="mui-col-xs-4">￥888.88</div></div>
            <div class="mui-row pop-index-list"><div class="mui-col-xs-7">物业管理费</div><div class="mui-col-xs-4">￥888.88</div></div>
        </div>
    </div>
    <div class="pop-index-btn">
        <a href="pay.html">确认订单</a>
    </div>
    <div id="close">×</div>
</div>
<div class="customer"></div>
<div class="backHome"></div>
<script src="js/drag.js?v=1.0.3"></script>
<script src="layer_mobile/layer.js"></script>
<script>
    $(".customer").dragEffect(".customer");
    $(".backHome").dragEffect(".backHome");
    function errorMessage(msg) {
        layer.open({
            content: `<div style="text-align: center">${msg}</div>`
            ,skin:"msg"
            ,time:3
            ,style: `padding:1rem;border-radius: 1rem;top:-5rem;`
        })
    }
    function asd(msg) {
        alert(1);
        layer.open({
           type:2
        });
        alert(2);
        layer.open({
            type:2
        });
        layer.open({
            type:2
        });
        layer.open({
            type:2
        })
    }
    document.getElementsByClassName("backHome")[0].addEventListener('tap', function(event){
        window.location.href="home.html";
    });
    $('.pub-collapse').click(function () {
        let collapse = $(this).parent('a').next('.pub-collapse-content');
        if(collapse.css("display")==="none"){
            collapse.css("display","block");
            $(this).children('.pub-bg-down').css("background-image","url('images/up1.png')")
        }else{
            collapse.css("display","none");
            $(this).children('.pub-bg-down').css("background-image","url('images/down1.png')")
        }
    })
    let payment=`
    <div class="title">预存款 <a class="delPaymentItem" href="javascript:void (0)"></a></div>
    <ul class="mui-table-view ">
        <li class="mui-table-view-cell mui-row pub-border-top">
            <div class="mui-col-xs-5">缴费类型：</div>
            <div class="mui-col-xs-7 pay-index-select">
                <select class="index-select" >
                    <option value="1">临时停车费</option>
                    <option value="2">物业费</option>
                </select>
            </div>
        </li>
        <li class="mui-table-view-cell mui-row pub-border-top">
            <div class="mui-col-xs-5">缴费金额：</div>
            <div class="mui-col-xs-7"><input type="text" placeholder="请输入缴费金额"></div>
        </li>
        <li class="mui-table-view-cell mui-row pub-border-top">
            <div class="mui-col-xs-5">备注：</div>
            <div class="mui-col-xs-7"><input type="text" placeholder="请输入备注内容"></div>
        </li>
        <li></li>
    </ul>
    `;
    $('#addPaymentItem').click(function () {
        let paymentItem = $("#paymentItem");
        paymentItem.append(payment);
    });
    $("body").on("click",".delPaymentItem",function () {
        console.log(1111);
        console.log($(this).parent(".title"));

        $(this).parent(".title").next().remove();
        $(this).parent(".title").remove();
    })

    let index;
    function submit() {
        let html = $("#html").html();
        index = layer.open({
            type: 1
            ,content: html
            ,anim: 'false'
            ,style: `width:90%;border-radius:1rem;`
        })
    }
    $("body").on("click","#close",function () {
        layer.close(index)
    })
</script>
</body>
</html>